<template>
  <div class="dashboard-container">

    <div class="stats-cards">
      <div class="stat-card today">
        <div class="stat-icon">📅</div>
        <div class="stat-content">
          <div class="stat-title">今日账单数</div>
          <div class="stat-number">{{ todayCount }} 笔</div>
          <div class="stat-amount">¥{{ todayAmount.toFixed(2) }}</div>
        </div>
      </div>
      
      <div class="stat-card yesterday">
        <div class="stat-icon">📊</div>
        <div class="stat-content">
          <div class="stat-title">昨日账单数</div>
          <div class="stat-number">{{ yesterdayCount }} 笔</div>
          <div class="stat-amount">¥{{ yesterdayAmount.toFixed(2) }}</div>
        </div>
      </div>
      
      <div class="stat-card this-week">
        <div class="stat-icon">📈</div>
        <div class="stat-content">
          <div class="stat-title">本周账单数</div>
          <div class="stat-number">{{ thisWeekCount }} 笔</div>
          <div class="stat-amount">¥{{ thisWeekAmount.toFixed(2) }}</div>
        </div>
      </div>
      
      <div class="stat-card this-month">
        <div class="stat-icon">💰</div>
        <div class="stat-content">
          <div class="stat-title">本月账单数</div>
          <div class="stat-number">{{ thisMonthCount }} 笔</div>
          <div class="stat-amount">¥{{ thisMonthAmount.toFixed(2) }}</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <div class="chart-card">
        <div class="chart-header">
          <h3>📊 最近7天账单数量趋势</h3>
        </div>
        <div class="chart-content">
          <div ref="weeklyChart" class="chart"></div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>💵 最近7天账单金额趋势</h3>
        </div>
        <div class="chart-content">
          <div ref="amountChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { getStats} from '@/api/bill'
import { ElMessage } from 'element-plus'

export default {
  name: 'UserWelcome',
  setup() {
    const todayCount = ref(0)
    const yesterdayCount = ref(0)
    const thisWeekCount = ref(0)
    const thisMonthCount = ref(0)
    const todayAmount = ref(0)
    const yesterdayAmount = ref(0)
    const thisWeekAmount = ref(0)
    const thisMonthAmount = ref(0)
    
    const weeklyChart = ref(null)
    const amountChart = ref(null)
    const weeklyData = ref([])
    const weeklyLabels = ref([])
    const amountData = ref([])

    // 获取统计数据
    const fetchDashboardStats = async () => {
      try {
        const res = await getStats()
        if (res.data.flag) {
          const stats = res.data.data
          todayCount.value = stats.todayCount || 0
          yesterdayCount.value = stats.yesterdayCount || 0
          thisWeekCount.value = stats.thisWeekCount || 0
          thisMonthCount.value = stats.thisMonthCount || 0
          todayAmount.value = stats.todayAmount || 0
          yesterdayAmount.value = stats.yesterdayAmount || 0
          thisWeekAmount.value = stats.thisWeekAmount || 0
          thisMonthAmount.value = stats.thisMonthAmount || 0
          weeklyData.value = stats.weeklyData || []
          weeklyLabels.value = stats.weeklyLabels || []
          amountData.value = stats.amountData || []
          
          await nextTick()
          initCharts()
        } else {
          ElMessage.error('获取统计数据失败：' + (res.data.message || '未知错误'))
        }
      } catch (error) {
        console.error('获取统计数据异常：', error)
        ElMessage.error('获取统计数据异常：' + (error.message || '未知错误'))
      }
    }


    const initCharts = async () => {
      try {
        const echarts = await import('echarts')
        
        if (weeklyChart.value && weeklyData.value.length > 0) {
          const chart1 = echarts.init(weeklyChart.value)
          const option1 = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: weeklyLabels.value
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: weeklyData.value,
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#409EFF',
                width: 3
              },
              itemStyle: {
                color: '#409EFF'
              }
            }]
          }
          chart1.setOption(option1)
          
          window.addEventListener('resize', () => {
            chart1.resize()
          })
        }

        if (amountChart.value && amountData.value.length > 0) {
          const chart2 = echarts.init(amountChart.value)
          const option2 = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: weeklyLabels.value
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: amountData.value,
              type: 'bar',
              barWidth: '60%',
              itemStyle: {
                color: '#409EFF'
              }
            }]
          }
          chart2.setOption(option2)
          
          // 响应式
          window.addEventListener('resize', () => {
            chart2.resize()
          })
        }
      } catch (error) {
        console.log('ECharts加载失败，使用备用显示方案')
      }
    }

    onMounted(async () => {
      await fetchDashboardStats()
    })

    return {
      todayCount,
      yesterdayCount,
      thisWeekCount,
      thisMonthCount,
      todayAmount,
      yesterdayAmount,
      thisWeekAmount,
      thisMonthAmount,
      weeklyChart,
      amountChart
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.stat-card.today::before {
  background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
}

.stat-card.yesterday::before {
  background: linear-gradient(90deg, #feca57, #ff9ff3);
}

.stat-card.this-week::before {
  background: linear-gradient(90deg, #48dbfb, #0abde3);
}

.stat-card.this-month::before {
  background: linear-gradient(90deg, #1dd1a1, #55efc4);
}

.stat-icon {
  font-size: 40px;
  margin-right: 15px;
  opacity: 0.8;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.stat-amount {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
  font-weight: 500;
}

.today .stat-number {
  color: #ff6b6b;
}

.yesterday .stat-number {
  color: #feca57;
}

.this-week .stat-number {
  color: #48dbfb;
}

.this-month .stat-number {
  color: #1dd1a1;
}

/* 图表容器样式 */
.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.chart {
  width: 100%;
  height: 300px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .stat-card {
    padding: 15px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .chart {
    height: 250px;
  }
}
</style>